<!-- 申请售后 -->
<template>
	<view class="refund-wrap">
		<!-- 售后商品 -->
		<view class="goods-box">
			<view class="big-every">
				<p>退款商品</p>
				<view class="top" >
					<view class="img">
						<image :src="orderItemDetail.goods_image" alt="">
					</view>
					<view class="conent">
						<view class="left">
							<p>{{orderItemDetail.goods_title}}</p>
							<span>{{orderItemDetail.goods_sku_text||''}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 售后类型 -->
		<view class="goods-item u-flex u-row-between" @tap="showModal1 = true">
			<text class="item-title">货物状态</text>
			<view class="u-flex refund-cause">
				<text class="u-m-r-20" style="color: #333;" v-if="refundCause1">{{ refundCause1 }}</text>
				<text class="u-m-r-20" v-else>请货物状态~</text>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view>
		</view>

		<!-- 申请原因 -->
		<view class="goods-item u-flex u-row-between" @tap="showModal = true">
			<text class="item-title">退款原因</text>
			<view class="u-flex refund-cause">
				<text class="u-m-r-20" style="color: #333;" v-if="refundCause">{{ refundCause }}</text>
				<text class="u-m-r-20" v-else>请退款原因~</text>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view>
		</view>
		
		<view style="margin-bottom: 20rpx;" class="goods-item u-flex u-row-between">
			<text class="item-title">退款金额</text>
			<view class="u-flex refund-cause">
				<text class="u-m-r-20">￥ {{orderItemDetail.goods_price}}</text>
			</view>
		</view>
		<view class="refund-item u-m-b-20">
			<view class="item-title">联系方式</view>
			<view class="input-box u-flex"><input type="number" class="item-input" v-model="phone" placeholder="请输入您的联系电话" placeholder-class="input--pl" /></view>
		</view>
		<!-- 留言 -->
		<view class="refund-item u-m-b-20">
			<view class="item-title">相关描述</view>
			<view class="describe-box">
				<textarea
					class="describe-content"
					v-model="refundContent"
					maxlength="120"
					placeholder="客官~请描述您遇到的问题，建议上传照片"
					placeholder-class="input--pl"
					fixed
				></textarea>
				<view class="upload-img">
					<u-upload
						:showProgress="false"
						@on-uploaded="uploadSuccess"
						@on-remove="uploadRemove"
						:action="`${baseUrl}/api/common/upload`"
						:header="{ token: token }"
						width="140"
						height="140"
						maxCount="9"
					></u-upload>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom">
			<view class="foot_box u-flex u-row-between safe-area-inset-bottom">
				<button class="u-reset-button sub-btn" @tap="postAftersale">申请退款</button>
			</view>
		</view>

		<!-- 申请原因弹窗 -->
		<u-popup v-model="showModal" safe-area-inset-bottom @close="showModal = false" mode="bottom" :closeable="true" close-icon-pos="top-left">
			<view class="modal-box page_box">
				<view class="modal-head head_box u-flex u-row-center u-col-center">{{ refundList.title }}</view>
				<view class="modal-content content_box">
					<view class="u-flex-col u-p-20">
						<u-radio-group v-model="refundCause" active-color="#d89f64" width="100%">
							<u-radio class="u-m-y-10" shape="circle" v-for="item in refundList.list" :key="item.value" :name="item.val">
								<text class="u-p-l-20">{{ item.val }}</text>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="modal-foot foot_box u-flex u-row-center u-col-center"><button class="u-reset-button close-btn" @tap="showModal = false">确定</button></view>
			</view>
		</u-popup>
		<u-popup v-model="showModal1" safe-area-inset-bottom @close="showModal1 = false" mode="bottom" :closeable="true" close-icon-pos="top-left">
			<view class="modal-box page_box">
				<view class="modal-head head_box u-flex u-row-center u-col-center">{{ refundList1.title }}</view>
				<view class="modal-content content_box">
					<view class="u-flex-col u-p-20">
						<u-radio-group v-model="refundCause1" active-color="#d89f64" width="100%">
							<u-radio class="u-m-y-10" shape="circle" v-for="item in refundList1.list" :key="item.id" :name="item.title">
								<text class="u-p-l-20">{{ item.title }}</text>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="modal-foot foot_box u-flex u-row-center u-col-center"><button class="u-reset-button close-btn" @tap="showModal1 = false">确定</button></view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { itemDetail,aftersale } from '@/api/api.js';
export default {
	components: {},
	data() {
		return {
			showModal: false,
			showModal1: false,
			imgList: [], //图片地址
			orderId: 0, //订单ID
			orderItemDetail: {}, //订单信息
			refundType: '', //售后类型
			refundCause: '', //退款原因
			refundCause1: '', //退款原因
			refundContent: '', //相关描述
			phone: '', //联系方式
			baseUrl:this.$baseUrl,
			refundTypeList: [
				//售后类型
				{
					title: '退款',
					value: 'refund'
				},
				{
					title: '退货',
					value: 'return'
				},
				{
					title: '其他',
					value: 'other'
				}
			],
			refundList1: {
				//申请原因
				title: '货物状态',
				list: [
					{
						title: '退款',
						value: 'refund'
					},
					{
						title: '退货',
						value: 'return'
					},
					{
						title: '其他',
						value: 'other'
					}
				]
			},
			refundList: {
				//申请原因
				title: '申请原因',
				list: [
					{
						id: 1,
						val: '卖家发错货了'
					},
					{
						id: 2,
						val: '退运费'
					},
					{
						id: 3,
						val: '大小/重量于商品描述不符'
					},
					{
						id: 4,
						val: '生产日期、保质期与商品不符'
					},
					{
						id: 5,
						val: '质量问题'
					}
				]
			},
			token: uni.getStorageSync('token'),
			orderList: []
		};
	},
	computed: {},
	onLoad(e) {
		this.orderList = e;
		this.getOrderItemDetail();
	},
	methods: {
		// 上传图片成功
		uploadSuccess(e) {
			this.imgList = [];
			e.forEach(item => {
				this.imgList.push(item.response.data.url);
			});
		},

		// 移除图片
		uploadRemove(index) {
			this.imgList.splice(index, 1);
		},

		// 订单item详情
		async getOrderItemDetail() {
			
			let res = await itemDetail(JSON.parse(this.orderList.id));
			if (res.code === 1) {
				this.orderItemDetail = res.data;
			}
			console.log(this.orderItemDetail);
		},
		async postAftersale(){
			console.log(JSON.parse(this.orderList.id), '666');
				let data={
						type: this.refundCause1,
						order_id: JSON.parse(this.orderList.id).id,
						order_item_id: JSON.parse(this.orderList.id).order_item_id,
						reason: this.refundCause,
						content: this.refundContent,
						images: this.imgList,
						phone:this.phone
					}
				let res=await aftersale(data)
				if(res.code==1){
					this.$refs.uToast.show({
						title: res.msg,
						url:'/pages/order/Details'
					})
				}else{
					this.$refs.uToast.show({
						title: res.msg,
					})
				}
		}
		// 提交售后
	// async	postAftersale() {
		
	// 		// let that = this;
	// 		// that.$http(
	// 		// 	'order.aftersale',
	// 		// 	{
	// 		// 		type: that.refundType,
	// 		// 		order_id: that.$Route.query.orderId,
	// 		// 		order_item_id: that.$Route.query.orderItemId,
	// 		// 		reason: that.refundCause,
	// 		// 		content: that.refundContent,
	// 		// 		images: that.imgList,
	// 		// 		phone: that.phone
	// 		// 	},
	// 		// 	'申请中...'
	// 		// ).then(res => {
	// 		// 	if (res.code === 1) {
	// 		// 		//  #ifdef MP-WEIXIN
	// 		// 		that.$store.commit('subscribeMessage', 'aftersale');
	// 		// 		//  #endif
	// 		// 		that.$Router.back();
	// 		// 	}
	// 		// });
	// 	}
	}
};
</script>

<style lang="scss">
// 售后项目
.refund-item {
	background-color: #fff;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 30rpx;
	.item-title {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 20rpx;
	}

	// 留言
	.describe-box {
		width: 690rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		.describe-content {
			width: 660rpx;
			padding: 30rpx;
			height: 200rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333;
		}
	}
	.input--pl {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(177, 179, 199, 1);
	}
	// 联系方式
	.input-box {
		height: 84rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		.item-input {
			padding: 0 30rpx;
			flex: 1;
			font-size: 28rpx;
			font-weight: 400;
			color: #333;
		}
	}
}

.goods-box {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
	.big-every{
			width: 100%;
			min-height: 280rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188,188,188,0.25);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 32rpx;
			position: relative;
			margin-top: 18rpx;
			p{
				font-size: 32rpx;
				font-family: Source Han Sans SC-Bold, Source Han Sans SC;
				font-weight: bold;
				color: #001B0A;
				padding-bottom: 32rpx;
			}
			.top{
				display: flex;
				min-height: 200rpx;
				.img{
					width: 160rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.conent{
					position: relative;
					margin-top:32rpx ;
					margin-left: 16rpx;
					.left{
						width: 316rpx;
						p{
							width: 316rpx;
							font-size: 32rpx;
							font-family: Source Han Sans SC-Medium, Source Han Sans SC;
							font-weight: 500;
							color: #001B0A;
						}
						span{
							font-size: 24rpx;
							font-family: Source Han Sans SC-Regular, Source Han Sans SC;
							font-weight: 400;
							color: #AAAAAA;
						}
					}
				}
			}
		}
	}

.goods-item {
	height: 95rpx;
	background: #fff;
	padding: 0 25rpx;
	margin-bottom: 20rpx;

	// 售后原因
	.refund-cause {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(177, 179, 199, 1);
	}

	&:nth-of-type(1n) {
		margin-bottom: 0;
		border-top: 0;
	}

	.item-title {
		font-size: 28rpx;
	}

	.price {
		font-size: 28rpx;
		color: #a8700d;
	}
}

.upload-img {
	padding: 25rpx;

	.upload-title {
		font-size: 28rpx;
	}
}

.img-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.choose-img,
	.preview-box {
		width: 110rpx;
		height: 110rpx;
		background: rgba(249, 250, 251, 1);
		border: 1rpx solid rgba(223, 223, 223, 1);
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		&:nth-child(5n) {
			margin-right: 0;
		}
		.preview-img {
			width: 100%;
			height: 100%;
		}
	}
}

.foot-wrap {
	height: 100rpx;
	width: 100%;
}
.foot_box {
	height: 100rpx;
	padding: 0 30rpx;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	border-top: 1rpx solid #f5f5f5;
	.sub-btn {
		width: 686rpx;
		height: 96rpx;
		background: #CB2929;
		border-radius: 78rpx 78rpx 78rpx 78rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: Source Han Sans SC-Bold, Source Han Sans SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
	.contcat-btn {
		width: 340rpx;
		line-height: 74rpx;
		background: rgba(238, 238, 238, 1);
		border-radius: 38rpx;
		font-size: 28rpx;

		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
}

.modal-box {
	width: 750rpx;
	height: 680rpx;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;

	.modal-head {
		height: 100rpx;
		font-size: 30rpx;
	}

	.modal-content {
		font-size: 28rpx;

		.sel-item {
			height: 100rpx;
			width: 100%;
			padding: 0 20rpx;
			border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);

			.sel-radio {
				transform: scale(0.7);
			}
		}
	}

	.modal-foot {
		.close-btn {
			width: 686rpx;
			height: 96rpx;
			background: #CB2929;
			border-radius: 78rpx 78rpx 78rpx 78rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans SC-Bold, Source Han Sans SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
}
.big-every{
		width: 100%;
		min-height: 342rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188,188,188,0.25);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx;
		position: relative;
		margin-top: 18rpx;
		.top{
			display: flex;
			min-height: 200rpx;
			.img{
				width: 160rpx;
				height: 160rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.conent{
				position: relative;
				margin-top:32rpx ;
				margin-left: 16rpx;
				.left{
					width: 316rpx;
					p{
						width: 316rpx;
						font-size: 32rpx;
						font-family: Source Han Sans SC-Medium, Source Han Sans SC;
						font-weight: 500;
						color: #001B0A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					span{
						font-size: 24rpx;
						font-family: Source Han Sans SC-Regular, Source Han Sans SC;
						font-weight: 400;
						color: #AAAAAA;
					}
				}
				.right{
					position: absolute;
					top: -30rpx;
					right: -90rpx;
					
					p{
						width: 90rpx;
						height: 36rpx;
						font-size: 24rpx;
						font-family: Source Han Sans SC-Medium, Source Han Sans SC;
						font-weight: 500;
						color: #001B0A;
					}
					span{
						width: 38rpx;
						height: 36rpx;
						font-size: 24rpx;
						font-family: Source Han Sans SC-Medium, Source Han Sans SC;
						font-weight: 500;
						color: #AAAAAA;
						margin-left: 65rpx;
					}
				}
				
			}
			
		}
		.footer{
				// position: absolute;
				margin-top: -30rpx;
				margin-left: 400rpx;
				width: 196rpx;
				height: 48rpx;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Bold, Source Han Sans SC;
				font-weight: bold;
				color: #000000;
				line-height: 48rpx;
			}
		.bottom{
			display: flex;
			// position: absolute;
			bottom: 32rpx;
			float: right;
			margin-left: 200rpx;
			.left{
				width: 176rpx;
				height: 64rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #EEEEEE;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #001B0A;
				line-height: 64rpx;
				text-align: center;
				margin-right: 32rpx;
			}
			.right{
				width: 176rpx;
				height: 64rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				border: 2rpx solid #E23434;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #E23434;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

</style>
